<!--搜索好友-->
<script>
import { addFriend, find } from '@/api/chat/friend'
import { getGroups, getGroupsByUserId } from '@/api/system/groups'
import { strIsEmpty } from '@/utils'
import CustomCard from '@/components/Chats/CustomCard.vue'

export default {
  name: '',
  components: { CustomCard },
  data() {
    return {
      searchText: '',
      emptyShow: false,
      friendList: [],
      loading: false,
      addFriendLoading: false,
      dialogFormVisible: false,
      //添加好友
      friend: {},
      groups: []
    }
  },
  methods: {
    /**
     * 查询朋友
     * @param val
     */
    searchChange(val) {
      if (strIsEmpty(val)) {
        return
      }

      val = val.trim()

      // this.loading = true
      this.$modal.loading('正在查找...')

      find(val).then(({ data }) => {
        if (!data.length) {
          this.emptyShow = true
        }

        this.friendList = data
        // this.loading = false
        this.$modal.closeLoading()

      }).catch(error => {
        console.log('err: ', error)
        // this.loading = false
        this.$modal.closeLoading()

      })
    },
    /**
     * 添加好友
     * @param item
     */
    openDialog(item) {
      //弹窗\ 填表单\ 提交
      this.dialogFormVisible = true
      // this.getGroups()

      console.log(item)

      this.friend.receiveUserId = item.userId

      // this.friend.phonenumber2 = item.phonenumber
      // this.friend.userId2 = item.userId
      // this.friend.remark = '我是 ' + this.$store.state.user.name

    },

    /**
     * 提交添加好友
     */
    addFriend() {
      this.addFriendLoading = true

      console.log('from data = ', this.friend)

      addFriend(this.friend).then(({ data }) => {
        console.log('res:', data)

        this.$modal.loading('申请成功 loading....')

        this.addFriendLoading = false
        this.dialogFormVisible = false
        this.$modal.closeLoading()

        this.$modal.alertSuccess('添加好友请求已发送！')

      })
    },

    /**
     * 查询分组
     */
    getGroups() {
      getGroupsByUserId().then(({ data }) => {
        this.groups = data
      })
    }

  },
  created() {
    this.$store.dispatch('app/toggleSideBarHide', true)
    this.$nextTick(() => {
      if (document.querySelector('.navbar')) {
        document.querySelector('.navbar').style.display = 'none'
      }
      if (document.querySelector('.tags-view-container')) {
        document.querySelector('.tags-view-container').style.display = 'none'
      }
    })
  }
}
</script>
<template>
  <div>
    <!--        搜索-->
    <van-sticky :offset-top="10">
      <div class="input-wrapper">
        <el-input @input="searchChange"
                  maxlength="30"
                  show-word-limit
                  placeholder="搜索"
                  v-model="searchText"
        >
          <i slot="prefix" class="el-input__icon el-icon-search"></i>
        </el-input>
      </div>
    </van-sticky>
    <br>
    <el-empty v-if="emptyShow" :image-size="200"></el-empty>

    <!-- 搜索出开的用户布局-->
    <div class="friend grid-content bg-purple " v-loading="loading" v-else>
      <el-card v-for="(item,index) in friendList" :key="index" :body-style="{ padding: '0px' }">
        <custom-card
          :desc="item.message"
          :title="`${item.nickName}(${item.phonenumber})`"
          :thumb="item.avatar"
          :centered="true"
          :type="'search'"
          @add="openDialog(item)"
        ></custom-card>
      </el-card>
    </div>


    <!--    添加好友弹窗-->
    <el-dialog title="添加好友" :visible.sync="dialogFormVisible" width="400px">
      <el-form :model="friend">
        <el-form-item label="备注">
          <el-input type="textarea" :rows="5" v-model="friend.remark"
                    autocomplete="off" maxlength="100"
                    show-word-limit
          ></el-input>
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="dialogFormVisible = false">取 消</el-button>
        <el-button v-loading="addFriendLoading" type="primary" @click="addFriend">确 定</el-button>
      </div>
    </el-dialog>
  </div>
</template>

<style>
.findUser {
  position: relative;
  //height: 20px; /* 设置一个高度，以便有足够的空间显示外边距 */
  padding: 10px 0;
}

.input-wrapper {
  position: absolute;
  left: 50%;
  transform: translateX(-50%);
  width: 80% /* 输入框宽度 */;
  margin: 0 10px; /* 如果需要左右外边距，可以在这里设置 */
}

.headImg {
  width: 100px;
  border-radius: 50%;
  display: block;
  margin-left: auto;
  margin-right: auto;
}

.nickName {
  line-height: 50px;
  font-weight: 800;

}

.grid-content .bg-purple {
  margin-top: 50px; /* 添加一个与 .findUser 高度相同的上边距，以防止 .grid-content bg-purple 被 .findUser 遮挡 */
  overflow-y: auto; /* 允许 .grid-content bg-purple 上下滚动 */
  height: calc(100vh - 95px); /* 设置 .grid-content bg-purple 的高度为视口高度减去 .findUser 的高度，以确保 .grid-content bg-purple 不会超出视口 */
}
</style>
